<!-- 轮播就像放电影，一张图片大小的固定光源，拉动排成一排的图片 -->
<template>
    <section class="scrollPane">
      <div id="focus">
        <ul class="focusUl" v-on:mouseover="stopPic" v-on:mouseout="showPic">
          <li v-for="(scroll, scrollIndex) in scrolls" v-show="scrollIndex==showIndex">
            <img :src="getImgUrl(scroll.cmdetail)">
          </li>
        </ul>
        <div class="focusSpanPane">
         <div class="focusSpan">
          <span v-for="(span,spanIndex) in spans" v-on:mouseover="changePic(spanIndex)">
            <div class="spanContent"/>
          </span>
         </div>
         <div class="focusSpanCover">

          </div>
        </div>
      </div>
    </section>
</template>

<script>
  import api from "../../../../axios/api.js"
  import $ from 'jquery'
    export default {
      name: "scroll",
      data() {
        return {
          timer: {},
          scrolls: [],
          showIndex: 0, //需要显示的图片的编号，默认第一张
          size: 0,
          width: 0,
          spans: [],//存放控制点的数组
        }
      },
      methods: {
        getImgUrl: function (imgsrc) {
          //idea edit configuration deployement add external source
          return "/api/upload/scroll/" + imgsrc;
        },
        getScrollData: function () {
          api.setDataFromAxios("/scrollData", null, "get", null).then(
            //默认返回就是response对象
            dto => {
              this.scrolls = dto.tList;
              this.size = $(this.scrolls).size();
              this.width = $("#focus").width();
              $(".focusUl").width(this.size * this.width);//动态根据图片大小和数量设置ul宽度
              this.initSpan();
              this.showPic();
            }
          );
        },
        showPic: function () {//显示图片的方法 开启定时器
          this.timer = setInterval(() => {
            this.showIndex++;
            $(".spanContent").css("background", "#8e8787");//全部变灰
            $(".spanContent:eq(" + this.showIndex + ")").css("background", "white");//当前变白
            if (this.showIndex == this.size) {//如果下一张图片的索引等于了图片数量已经是最后一张回到第一张
              this.showIndex = 0
              $(".spanContent:eq(0)").css("background", "white");
            }

          }, 1000)//每隔一秒执行切换
        },
        changePic(spanIndex) {
          //alert(spanIndex)
          $(".spanContent").css("background", "#8e8787");
          this.showIndex = spanIndex;
          $(".spanContent:eq(" + spanIndex + ")").css("background", "white");
          this.stopPic();
        },
        //根据图片数量生成 控制点
        initSpan: function () {
          //console.log(scrolls);
          var spansHTML = "";
          for (var index = 0; index < this.scrolls.length; index++) {
            this.spans.push(this.scrolls[index].cmname);
          }
        },
        stopPic() {
          clearInterval(this.timer);
        }

      },
      created() {
        this.getScrollData();
      },
      watch: {//watch 用于监控当前页面的变量的值变化 如果直接调用方法是渲染前的界面，使用this.nextTick 中的方法才是渲染完成后调用
        spans: {
          handler(val, oldVal) {
            this.$nextTick(function () {
              $(".spanContent:eq(0)").css("background", "white");
            })

          },
          deep: true//打开深度监听
        },
      }
    }
</script>

<style scoped lang="stylus">
 .scrollPane
    width 1000px;
    margin 0 auto;
    height 280px;
    #focus
      width:1000px;
      overflow hidden;
      margin 0 auto;
      position relative;
      .focusUl
        margin 0
        padding 0
        li
          list-style-type none;
          float left;
          img
            width 1000px;
            height 280px;
        &:after
          clear both
          content ''
          display block
      .focusSpanPane
        position absolute;
        bottom 10px;
        width 100%;
        height 20px;
       .focusSpanCover
         width 100%
         height 20px;
         background-color black;
         opacity 0.4;
         position absolute;
         top 0
         left 0
         z-index 3
       .focusSpan
         position relative
         margin 0 auto;
         height 20px;
         line-height 20px;
         z-index 4
         span
           display inline-block
           margin-left 10px;
           width 10px
           height 10px
           position relative
           .spanContent
            background-color #8e8787;
            width 10px
            height 10px
            border-radius 10px
            z-index 4

</style>
